<template>
  <div class="share-page">
    <div class="page-header">
      <h1 class="title">微信分享</h1>
      <p class="subtitle">分享内容到微信好友和朋友圈</p>
    </div>

    <div class="container">
      <div class="share-content">
        <!-- 分享表单 -->
        <div class="share-form">
          <div class="share-card">
            <h2>创建分享内容</h2>
            <form @submit.prevent="createShare">
              <div class="form-group">
                <label for="title">分享标题</label>
                <input
                  id="title"
                  v-model="shareForm.title"
                  type="text"
                  required
                  placeholder="请输入分享标题"
                />
              </div>
              <div class="form-group">
                <label for="description">分享描述</label>
                <textarea
                  id="description"
                  v-model="shareForm.description"
                  required
                  placeholder="请输入分享描述"
                  rows="3"
                ></textarea>
              </div>
              <div class="form-group">
                <label for="link">分享链接</label>
                <input
                  id="link"
                  v-model="shareForm.link"
                  type="url"
                  required
                  placeholder="请输入分享链接"
                />
              </div>
              <div class="form-group">
                <label for="imgUrl">分享图片</label>
                <input
                  id="imgUrl"
                  v-model="shareForm.imgUrl"
                  type="url"
                  placeholder="请输入图片链接"
                />
              </div>
              <button type="submit" class="btn btn-primary" :disabled="isLoading">
                {{ isLoading ? '分享中...' : '立即分享' }}
              </button>
            </form>
          </div>
        </div>

        <!-- 分享历史 -->
        <div class="share-history">
          <h2>分享记录</h2>
          <div v-if="shareHistory.length === 0" class="empty-state">
            <p>暂无分享记录</p>
          </div>
          <div v-else class="history-list">
            <div
              v-for="share in shareHistory"
              :key="share.shareId"
              class="history-item"
            >
              <div class="share-preview">
                <img v-if="share.imgUrl" :src="share.imgUrl" :alt="share.title" />
                <div class="preview-content">
                  <h3>{{ share.title }}</h3>
                  <p>{{ share.description }}</p>
                  <a :href="share.link" target="_blank" class="share-link">
                    {{ share.link }}
                  </a>
                </div>
              </div>
              <div class="share-actions">
                <button @click="shareToFriend(share)" class="btn btn-secondary">
                  分享给好友
                </button>
                <button @click="shareToMoments(share)" class="btn btn-primary">
                  分享到朋友圈
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useWeChatStore } from '@/stores/wechat'
import { wechatApi } from '@/api/wechat'
import type { ShareInfo } from '@/types'

const wechatStore = useWeChatStore()

const shareForm = ref({
  title: '',
  description: '',
  link: '',
  imgUrl: ''
})

const isLoading = ref(false)

const shareHistory = computed(() => wechatStore.shareHistory)

const createShare = async () => {
  if (!shareForm.value.title || !shareForm.value.description || !shareForm.value.link) {
    alert('请填写完整信息')
    return
  }

  isLoading.value = true
  try {
    const response = await wechatApi.shareContent(shareForm.value as ShareInfo)
    
    if (response.code === 200) {
      const newShare: ShareInfo = {
        ...shareForm.value,
        shareId: response.data.shareId
      }
      
      wechatStore.addShare(newShare)
      
      // 重置表单
      shareForm.value = {
        title: '',
        description: '',
        link: '',
        imgUrl: ''
      }
      
      alert('分享内容创建成功！')
    } else {
      alert('创建分享失败: ' + response.message)
    }
  } catch (error) {
    console.error('创建分享失败:', error)
    // 模拟分享成功
    const newShare: ShareInfo = {
      title: shareForm.value.title,
      description: shareForm.value.description,
      link: shareForm.value.link,
      imgUrl: shareForm.value.imgUrl || 'https://via.placeholder.com/200x200/07c160/ffffff?text=Share'
    }
    
    wechatStore.addShare(newShare)
    
    // 重置表单
    shareForm.value = {
      title: '',
      description: '',
      link: '',
      imgUrl: ''
    }
    
    alert('模拟分享成功！')
  } finally {
    isLoading.value = false
  }
}

const shareToFriend = (share: ShareInfo) => {
  // 模拟分享给好友
  alert(`模拟分享给好友：${share.title}`)
}

const shareToMoments = (share: ShareInfo) => {
  // 模拟分享到朋友圈
  alert(`模拟分享到朋友圈：${share.title}`)
}

onMounted(() => {
  // 模拟加载分享历史
  const mockShares: ShareInfo[] = [
    {
      title: '微信场景实现系统',
      description: '集成各种微信功能，快速构建微信生态应用',
      link: 'https://example.com',
      imgUrl: 'https://via.placeholder.com/200x200/07c160/ffffff?text=WeChat',
      shareId: 'share_001'
    },
    {
      title: 'Vue3 + TypeScript 开发指南',
      description: '学习现代前端开发技术，提升开发效率',
      link: 'https://example.com/vue3-guide',
      imgUrl: 'https://via.placeholder.com/200x200/42b883/ffffff?text=Vue3',
      shareId: 'share_002'
    }
  ]
  
  mockShares.forEach(share => {
    wechatStore.addShare(share)
  })
})
</script>

<style scoped>
.share-page {
  min-height: 100vh;
  position: relative;
}

.page-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 0 0 30px 30px;
  margin-bottom: 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.share-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.share-form,
.share-history {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.share-form h2,
.share-history h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.3s ease;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.btn {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.history-list {
  max-height: 500px;
  overflow-y: auto;
}

.history-item {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: #f9f9f9;
}

.share-preview {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.share-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.preview-content {
  flex: 1;
  min-width: 0;
}

.preview-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-content p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-link {
  font-size: 0.8rem;
  color: #667eea;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.share-link:hover {
  text-decoration: underline;
}

.share-actions {
  display: flex;
  gap: 8px;
}

.share-actions .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .share-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .title {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
  
  .share-actions {
    flex-direction: column;
  }
  
  .share-preview {
    flex-direction: column;
  }
  
  .share-preview img {
    width: 100%;
    height: 120px;
  }
}
</style>
